import { clueOrganizationStatistics } from '@/services/api/api-brain-cues-analysis';
import { DrawerForm } from '@ant-design/pro-form';
import { Descriptions, Flex, Segmented, Spin } from 'antd';
import { useState } from 'react';
interface OrganizationStatisticsProps {
  trigger?: JSX.Element;
  createdTimes: [];
}

const OrganizationStatistics: React.FC<OrganizationStatisticsProps> = ({
  trigger,
  createdTimes,
}) => {
  const [data, setDataState] =
    useState<CuesAnalysisData.CuesAnalysisClueOrganizationStatisticsVo>();
  const [segmented1Value, setSegmented1Value] = useState<string | number>('市级部门');
  const [segmented2Value, setSegmented2Value] = useState<string | number>('主动报送');

  const loadData = async () => {
    try {
      const response = await clueOrganizationStatistics({
        createdTimes,
      });
      if (response.code === 0) {
        setDataState(response.data);
      }
    } catch (error) {}
  };

  return (
    <DrawerForm
      title={
        createdTimes != undefined && createdTimes.length > 0
          ? `统计：${createdTimes.join(' - ')}`
          : ''
      }
      trigger={trigger}
      drawerProps={{
        size: 'large',
        forceRender: true,
        destroyOnClose: true,
        width: '600px',
      }}
      submitter={false}
      onOpenChange={(visible) => {
        if (visible) {
          loadData();
        }
      }}
    >
      <Spin spinning={data == undefined}>
        {data != undefined ? (
          <>
            <Descriptions title="市级部门">
              <Descriptions.Item label="全部线索">{data?.sjbmCount}条</Descriptions.Item>
              <Descriptions.Item label="主动报送">
                {`${data?.sjbmActiveOrganizationCount}家 / ${data?.sjbmActiveCount}条`}
              </Descriptions.Item>
              <Descriptions.Item label="选题计划">
                {`${data?.sjbmSubmitOrganizationCount}家 / ${data?.sjbmSubmitCount}条`}
              </Descriptions.Item>
            </Descriptions>
            <Descriptions title="区县单位">
              <Descriptions.Item label="全部线索">{data?.qxCount}条</Descriptions.Item>
              <Descriptions.Item label="主动报送">
                {`${data?.qxActiveOrganizationCount}家 / ${data?.qxActiveCount}条`}
              </Descriptions.Item>
              <Descriptions.Item label="选题计划">
                {`${data?.qxSubmitOrganizationCount}家 / ${data?.qxSubmitCount}条`}
              </Descriptions.Item>
            </Descriptions>
            <div>
              <Segmented
                options={['市级部门', '区县单位']}
                value={segmented1Value}
                onChange={setSegmented1Value}
              />
            </div>
            <br />
            <div>
              <Segmented
                options={['主动报送', '选题计划']}
                value={segmented2Value}
                onChange={setSegmented2Value}
              />
            </div>
            <br />
            <div
              style={{
                marginLeft: 10,
                marginRight: 10,
              }}
            >
              {segmented1Value == '市级部门'
                ? segmented2Value == '主动报送'
                  ? data?.sjbmSubmits.map((item) => (
                      <div>
                        <Flex justify={'space-between'} align={'center'}>
                          <span>{item.organizationName}</span>
                          <span>{item.count}</span>
                        </Flex>
                      </div>
                    ))
                  : data?.sjbmActives.map((item) => (
                      <div>
                        <Flex justify={'space-between'} align={'center'}>
                          <span>{item.organizationName}</span>
                          <span>{item.count}</span>
                        </Flex>
                      </div>
                    ))
                : segmented2Value == '选题计划'
                ? data?.qxActives.map((item) => (
                    <div>
                      <Flex justify={'space-between'} align={'center'}>
                        <span>{item.organizationName}</span>
                        <span>{item.count}</span>
                      </Flex>
                    </div>
                  ))
                : data?.qxSubmits.map((item) => (
                    <div>
                      <Flex justify={'space-between'} align={'center'}>
                        <span>{item.organizationName}</span>
                        <span>{item.count}</span>
                      </Flex>
                    </div>
                  ))}
            </div>
          </>
        ) : (
          '暂无数据'
        )}
      </Spin>
    </DrawerForm>
  );
};

export default OrganizationStatistics;
